<template>
	<view class="content">
		<topBox :buttonShow="true"></topBox>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<view class="item-title" >
					<text class="name">
						{{ item.recruit_type_work }}
					</text>
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con" >
					<view class="con-row">
						<text class="txt">地址：</text>
						<view class="txt-con">{{ item.recruit_address }}</view>
					</view>
					<view class="con-row">
						<text class="txt">工作内容：</text>
						<view class="txt-con">{{ item.recruit_requirement || ''}}</view>
					</view>
					<view class="con-row">
						<text class="txt">招工奖励及要求：</text>
						<view class="txt-con">{{ item.recruit_content || ''}}</view>
					</view>
					
				<!-- 	<view class="flex-row">
						<view class="row">
							招聘人数：
							<text class="light">{{ item.recruit_ordered || 0}}/{{ item.recruit_people_number }}</text>
						</view>
					</view> -->
                    <!-- <view class="con-row">
                    	<text class="txt">给小中介的留言</text>
						<text class="txt">{{item.recruit_content}}</text>
                    </view> -->
					<!-- <view class="con-row" v-if="item.recruit_is_show_phone">
						<text class="txt">联系电话：</text>
						<view class="txt-con">
							<text style="color: #fff;padding:5upx 10upx;background-color: #007AFF;" @click="makeCall(item)">{{ item.recruit_link_tel }}</text>
						</view>
					</view> -->
					<view class="flex" style="margin-bottom: 10rpx;">
						<view class="txt">
							发布时间：{{item.recruit_create_time}}
						</view>
						<view class="status">
							<text>距离您{{item.recruit_distance}}公里</text>
						</view>
					</view>
				</view>
				<view class="bottom flex">
					<u-avatar class="headImg" :src="item.avatarUrl" mode="square"></u-avatar>
					<view class="">
						本项目专用联系电话
						<view class="">
							{{item.recruit_link_tel}}
						</view>
						<view class="" v-for="mItem in item.mobile" :key="mItem.mobile">
							{{mItem.mobile}}
						</view>
					</view>
					
					<u-button v-if="item.id >0" @click="toClaim(item.recruit_id, item.id)" style="border: 1rpx solid #666;">已认领</u-button>
					<u-button v-else type="primary" @click="toClaim(item.recruit_id)" :custom-style="customStyle">帮他招工赚钱</u-button>
				</view>
			</view>

			<!-- 数据为空 -->
			<u-empty v-if="list.length == 0" text="暂无数据~" :margin-top="100"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20" :margin-bottom="20" />
		</view>
		<tabBar :selected="0"></tabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import topBox from '../../components/top-box/top-box.vue';
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
	components: {
		topBox,
		tabBar
	},
	data() {
		return {
			videoCurrTime: 0,
			videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',
			customStyle: {
				background: '#E04110',
				height:'100%',
				border: 'none',
				color: '#fff'
			},
			loadStatus: 'nomore',
			params: {
				startRow: 1,
				rowSize: 6,
				latitudes: 32,
				longitudes: 43,
				status: 'FB',
				token: uni.getStorageSync('token')
			},
			list: [],
			imageCode: '',
			show: true,
			userId: '',
			role: uni.getStorageSync('role')
		};
	},
	computed: {
		...mapState({
			// userId: state => state.userId
		})
	},
	onShow() {
		console.log(111)
		this.list = []
		this.params.startRow = 1
		uni.hideTabBar()
		uni.getLocation({
			type: 'wgs84',
			success: res => {
				this.params.latitudes = res.latitude;
				this.params.longitudes = res.longitude;
				this.postGetActivityList('up');
			}
		});
	},
	onLoad(e) {
		this.userId = uni.getStorageSync('userId');
		let token = uni.getStorageSync('token');
		if (token) {
			// this.generateCode();
		}
		if (e.scene) {
			let scene = decodeURIComponent(e.scene);
			uni.setStorageSync('recId', e.scene);
		}
	
		
	},
	onPullDownRefresh() {
		this.dropDown();
	},
	onReachBottom() {
		this.pullUp();
	},
	onShareAppMessage(res) {
		return {
			title: `嗨！快来加入我们平台吧`,
			imageUrl: '../../static/image/share.jpg',
			path: 'pages/index/full-screen'
		}
	},
	methods: {
		toDesc(row){
			if(!row.recruit_id){
				return uni.showToast({
					title:'数据异常，请稍后再试',
					icon:'none'
				})
			}
			console.log(row)
			uni.navigateTo({
				url:'../preview/previewDetail?recruit_id='+row.recruit_id +'&id=' + row.id
			})
			console.log(row.recruit_id)
		},
		toClaim(recruit_id, id){
			console.log(recruit_id)
			if(!recruit_id){
				return uni.showToast({
					title:'数据异常，请稍后再试',
					icon:'none'
				})
			}
			uni.navigateTo({
				url:'../talent/publishClaim?recruit_id='+recruit_id + '&id=' + (id ? id: '')
			})
			console.log(recruit_id)
		},
		makeCall(item) {
			uni.makePhoneCall({
				phoneNumber: item.recruit_link_tel
			});
		},
		// 下拉刷新
		dropDown() {
			console.log('down');
			// 修改当前view的数据
			this.params.startRow = 1;
			// 加载下拉刷新的数据
			this.postGetActivityList('down');
		},
		// 上拉加载
		pullUp() {
			console.log('up');
			// 增加页数
			this.params.startRow++;
			// 请求获取数据
			this.postGetActivityList('up');
		},
		// 活动管理-查询活动列表
		postGetActivityList(type) {
			this.$u.api
				.postPageQueryByWork(this.params)
				.then(res => {
					uni.stopPullDownRefresh();
					if (res.status == true) {
						let data = res.data;
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (res.data.length <= this.params.rowSize) {
								for (var i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i]);
								}
								this.loadStatus = 'loading';

								// 如果数量小于页容量，显示没有更多数据
								if (res.data.length < this.params.rowSize) {
									this.loadStatus = 'nomore';
								}
							} else {
								this.params.rowSize = res.data.total;
								this.loadStatus = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 将数据
							for (var i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i]);
							}

							this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - res.data.length);
						}
					}
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		generateCode() {
			let params = {
				busiType: 1,
				busiId: uni.getStorageSync('userId') + ',GG',
				url: 'pages/index/index'
			};
			this.$u.api.postGenerateQrCode(params).then(res => {
				if (res.status == true) {
					this.imageCode = 'data:image/jpeg;base64' + res.data;
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	position: relative;
	// padding-top: 240upx;
	padding-bottom: 30rpx;
	.publish_btn{
		margin: 20upx;
	}
	.list-wrap {
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;

					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}

			.light {
				color: #333;
				margin: 0 6upx;
			}
		}
	}
}
.textarea{
	border: 1px solid #C0C0C0;
	margin: 10upx 0;
	padding: 10upx;
}
</style>
